<template>
	<el-container>
		<el-header>
			<el-row>
				<el-col :span="1">
					<span><i class="el-icon-s-help" style="text-align: right; font-size: 30px; color: #42acff; padding-top: 13px;"></i></span>
				</el-col>
				<el-col :span="2">
					<span>综合定位平台</span>
				</el-col>
				<el-col :span="17">
					<el-menu :default-active="activeIndex" active-text-color="#00acff" class="el-menu-demo" mode="horizontal" @select="handleSelect">
						<el-menu-item index="1">地图监控</el-menu-item>
						<el-menu-item index="2">实体管理</el-menu-item>
						<el-menu-item index="3">围栏管理</el-menu-item>
					</el-menu>
				</el-col>

				<el-col :span="4" style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-user-solid" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item><i class="el-icon-guide" style="margin-right: 15px"></i>退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>Admin</span>
				</el-col>
			</el-row>
		</el-header>
		<el-main>
			<el-form :inline="true" :model="formInline" class="demo-form-inline" style="height: 40px;padding: 10px;text-align: left;">
				<el-form-item>
					<el-input size="small" v-model="formInline.name" placeholder="编号"></el-input>
				</el-form-item>
				<el-form-item style="width: 75%;">
					<el-button size="small" type="primary" @click="onSubmit" icon="el-icon-search"></el-button>
				</el-form-item>

				<el-form-item>
					<el-button size="small" type="primary" @click="showAdd" icon="el-icon-plus"></el-button>
				</el-form-item>
			</el-form>

			<!--表单渲染-->
			<el-dialog title="编辑设备" :visible.sync="editdialogFormVisible">
				<el-form :model="editform">
					<el-form-item label="编号" :label-width="formLabelWidth">
						<el-input v-model="editform.TermID" readonly disabled autocomplete="off" style="text-align: left;width: 80%;"></el-input>
					</el-form-item>
					<el-form-item label="别名" :label-width="formLabelWidth">
						<el-input v-model="editform.Alias" autocomplete="off" style="text-align: left;width: 80%;"></el-input>
					</el-form-item>
					<el-form-item label="类型" :label-width="formLabelWidth">
						<el-select v-model="editform.Type" placeholder="请选择类型" style="text-align: left;width: 80%;">
							<el-option label="阿道夫" value="1"></el-option>
							<el-option label="发发发" value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="editdialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onEdit">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="新增设备" :visible.sync="adddialogFormVisible">
				<el-form :model="addform">
					<el-form-item label="别名" :label-width="formLabelWidth">
						<el-input v-model="addform.Alias" autocomplete="off" style="text-align: left;width: 80%;"></el-input>
					</el-form-item>
					<el-form-item label="类型" :label-width="formLabelWidth">
						<el-select v-model="addform.Type" placeholder="请选择类型" style="text-align: left;width: 80%;">
							<el-option label="阿道夫" value="1"></el-option>
							<el-option label="发发发" value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="adddialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onAdd">确 定</el-button>
				</div>
			</el-dialog>

			<el-table :data="deviceList" style="width: 100%;">
				<el-table-column prop="TermID" label="编号" width="180">
				</el-table-column>

				<el-table-column prop="Type" label="类型" width="100" :filters="[{ text: 'JT808设备', value: 'JT808设备' }, { text: 'GGA设备', value: 'GGA设备' }]"
				:filter-method="filterType" filter-placement="bottom-end">
					<template slot-scope="scope">
						<el-tag :type="scope.row.Type === 'JT808设备' ? 'primary' : 'success'" disable-transitions>{{scope.row.Type}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="Alias" label="别名" width="180">
				</el-table-column>

				<el-table-column prop="State" sortable label="状态" width="100">
				</el-table-column>

				<el-table-column prop="Working" label="位置在线状态" width="130" :filters="[{ text: '离线', value: '离线' }, { text: '从未连接', value: '从未连接' }]"
				:filter-method="filterOlinestate" filter-placement="bottom-end">
					<template slot-scope="scope">
						<el-tag :type="scope.row.Working === '离线' ? 'primary' : 'success'" disable-transitions>{{scope.row.Working}}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="Fence" label="轮廓" width="100">
				</el-table-column>

				<el-table-column prop="Scene" label="场景" width="100">
				</el-table-column>

				<el-table-column prop="Owner" label="绑定人员" width="100">
				</el-table-column>

				<el-table-column prop="LastTime" label="更新时间" width="160">
				</el-table-column>

				<el-table-column label="操作" fixed="right" width="130">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage+1"
			:page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
			:total="total">
			</el-pagination>
		</el-main>
	</el-container>
</template>

<script>
	import axios from '../utils/axios'

	export default {
		data() {
			return {
				activeIndex: '2',
				formInline: {
					name: '',
				},
				deviceList: [],
				currentPage: 0, //0 开始
				pagesize: 10,
				total: 100,
				editdialogFormVisible: false, //编辑
				adddialogFormVisible: false, //新增
				formLabelWidth: '80px',
				editform: {
					Alias: '',
					Type: '',
					TermID: '',
				},
				addform: {
					Alias: '',
					Type: '',
				},
			};
		},
		created() {
			// console.log('created');
		},
		beforeMount: function() {
			// console.log('beforeMount');

		},
		updated: function() {
			// console.log('updated');

		},
		mounted() {
			// console.log('mounted!----');
			// setInterval(() => {
			// 	this.timer_num++;
			// 	console.log("timer_num=" + this.timer_num);
			// }, 5000)
			this.list_device();
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pagesize = val;
				this.currentPage = 0;
				this.list_device();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val - 1;
				this.list_device();
			},
			list_device() {
				let _this = this;
				console.log("PageIndex=" + this.currentPage);
				console.log("PageSize=" + this.pagesize);
				//http://test6.megowx.com/api/v2/list_device
				//http://localhost:8080/api/v2/list_device
				//http://rhc.test/api/v2/list_device
				axios.post('/list_device', {
						PageIndex: _this.currentPage,
						PageSize: _this.pagesize,
						Alias: this.formInline.name
					}).then(function(response) {
						// console.log("111");
						console.log(response);
						_this.total = response.data.total;
						console.log(response.data.result);
						_this.deviceList = response.data.result;
					})
					.catch(function(error) {
						// console.log("22");
						console.log(error);
					});

			},
			onSubmit() {
				this.list_device();
			},
			filterOlinestate(value, row) {
				return row.olinestate === value;
			},
			filterType(value, row) {
				return row.type === value;
			},
			handleEdit(index, row) {
				console.log(index, row);
				this.editdialogFormVisible = true;
				this.editform.Alias = row.Alias;
				this.editform.Type = row.Type;
				this.editform.TermID = row.TermID;
			},
			showAdd() {
				this.adddialogFormVisible = true;
			},
			onEdit() {
				this.editdialogFormVisible = false;
			},
			onAdd() {
				this.adddialogFormVisible = false;
			},
			handleDelete(index, row) {
				console.log(index, row);
				this.$confirm('确定删除' + row.TermID, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath + "=keyPath");
				if (key == '1') {
					this.$router.push({
						path: '/monitor'
					});
				} else if (key == "2") {
					// this.$router.push({
					// 	path: '/entity'
					// });
				} else if (key == "3") {
					this.$router.push({
						path: '/fence'
					});
				} else if (key == '4') {
					this.$router.push({
						path: '/config'
					});
				}
			}
		}
	}
</script>

<style>
	.el-header {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		line-height: 30px;
	}

	.el-main {
		text-align: center;
	}

	.el-table__header tr,
	.el-table__header th {
		text-align: center;
		padding: 0;
		height: 40px;
		background-color: #fafafa;
		line-height: 30px;
	}

	.el-table__body tr,
	.el-table__body td {
		text-align: center;
		padding: 0;
		height: 40px;
		line-height: 30px;
	}
</style>
